<template>
  <div id="course_save">


    <!--    form 表单 start -->
    <el-dialog title="编辑" width="100%" :visible.sync="dialogFormVisible">

      <student-table ref="studentTableAction"></student-table>

      <el-form :model="form">

        <el-form-item label="时间段" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="form.slotCode" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="星期" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="form.weekType" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="form.dateTime" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="颜色" :label-width="formLabelWidth">
          <el-select v-model="form.colorValue" placeholder="请选择">
            <el-option v-for="item in colorList"
                       :style="item.value"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="updateCourse()">保存时间段信息</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
  import studentTable from './StudentTable'
  import Bus from './bus.js';
    export default {
      name: "course_save",
      components: {
        studentTable
      },
      // props: {
      //   sendUrl :{type :String,require: true} //url地址
      // },
      data () {
        return {
          formLabelWidth: '120px',//form表单样式大小
          dialogFormVisible: false,
          form: {//form表单数据
            id:'',
            weekType: '',
            slotCode:'',
            slotCodeValue:'',
            dayStr: '',
            dateTime:'',
            colorValue:"",
          },
          //颜色选择下拉框
          colorList: [
            {
              value: '',
              label: '无'
            },
            {
              value: 'background-color: #fbfdff',
              label: '白色'
            }, {
              value: 'background-color: #fbc4c4',
              label: '粉色'
            },{
              value: 'background-color: #f78989',
              label: '红色'
            }, {
              value: 'background-color: #5daf34',
              label: '绿色'
            }, {
              value: 'background-color: #409eff',
              label: '蓝色'
            }, {
              value: 'background-color: #82848a',
              label: '灰色'
            }, {
              value: 'background-color: #cf9236',
              label: '黄色'
            },{
              value: 'background-color: mediumorchid',
              label: '紫色'
            }]

          }
      },methods :{
          childCourseDetailFrom(data,stage,slotCode,dayStr){

          if(data.id==null){
            //1.保存返回id
            this.saveCourse(slotCode,dayStr,stage);

          }else{
            //把准备的数据放到form表单中 显示出来
            this.form.id = data.id
            this.form.dateTime = data.dateTime
            this.form.slotCode = stage;
            //设置周几
            let weekIndex = data.weekType;
            let weekType = this.getWeekName(weekIndex);
            this.form.weekType = weekType;
            this.form.colorValue = data.backgroundColor
            //这种使用方式 解决刷新后第一次对方接收不到数据的问题
            this.$nextTick(function () {
              //更新数据id
              Bus.$emit('toBaseCourseIdAction', this.form.id);
            });

            //显示表单框
            this.dialogFormVisible = true;
          }
        },

        getWeekName(weekIndex) {
            let weekTypeName = "星期一";
            if(weekIndex==undefined||weekIndex==null){
              return weekTypeName;
            }
            switch (weekIndex) {
                case 1:weekTypeName = "星期一"; break
                case 2:weekTypeName = "星期二"; break
                case 3:weekTypeName = "星期三"; break
                case 4:weekTypeName = "星期四"; break
                case 5:weekTypeName = "星期五"; break
                case 6:weekTypeName = "星期六"; break
                case 7:weekTypeName = "星期日"; break
            }
            return weekTypeName;
        },

        //保存
        saveCourse(slotCode,dayStr,stage){
          let requestData = {
            "id": '',
            "slotCode":slotCode,
            "dayStr":dayStr,
            "backgroundColor":''
          };

          this.$store.dispatch("course/updateObject", requestData).then((res) => {
            let id = res.data;
            // console.log(JSON.stringify(res.data));
            this.form.id = id;
            //根据id查询数据
           this.findCourseToShowFrom(id,stage);
          }).catch((e) => {
            console.log(e)
          });

        },
        //查询并显示表单
        findCourseToShowFrom(id,stage){
          const param = {id:id}
          this.$store.dispatch("course/findCourseToShowFrom", param).then((res) => {
              let data = res.data;
              // console.log(JSON.stringify(res.data));
              //把准备的数据放到form表单中 显示出来
              this.form.id = data.id
              this.form.dateTime = data.dateTime
              this.form.slotCode = stage;
              //设置周几
              let weekIndex = data.weekType;
              let weekType = this.getWeekName(weekIndex);
              this.form.weekType = weekType;
              this.form.colorValue = data.backgroundColor
              // console.log("toBaseCourseIdAction11 "+data.id);
              //更新数据id
              //这种使用方式 解决刷新后第一次对方接收不到数据的问题
              this.$nextTick(function () {
                //更新数据id
                Bus.$emit('toBaseCourseIdAction', data.id);
              });
              //显示表单框
              this.dialogFormVisible = true;

          }).catch((e) => {
            console.log(e)
          });

        },

       //保存数据
        updateCourse (){
          let id = this.form.id;
          let backgroundColor = this.form.colorValue;
          let slotCode = this.form.slotCodeValue;
          let dayStr = this.form.dayStr;
          let requestData = {
             "id": id,
            "slotCode":slotCode,
            "dayStr":dayStr,
            "backgroundColor":backgroundColor
          };

          //更新模板数据
          this.$store.dispatch("course/updateObject", requestData).then((res) => {
            //隐藏表单
            this.dialogFormVisible = false;
            // 查询并刷新数据 this.findTableList();  子组件执行父组件的方法
            this.$emit("courseFindTableListAction");
          }).catch((e) => {
            console.log(e)
          });

        }


      }
    }
</script>

<style scoped>

</style>
